/**
 * 获取canvas 2d context
 * @param {string} canvasId 
 */
var getCtx = function (canvasId) {
    var canvas = document.getElementById(canvasId);
    var ctx = canvas.getContext("2d");
    return ctx;
}

/**
 * @param {Number} x 椭圆的左上角的x坐标
 * @param {Number} y 椭圆的左上角的y坐标
 * @param {Number} w 椭圆的长轴
 * @param {Number} h 椭圆的短轴
 */
var drawEllipse = function (ctx, x, y, w, h) {
    var k = 0.55228475;
    var ox = (w / 2) * k;
    var oy = (h / 2) * k;
    var xe = x + w;
    var ye = y + h;
    var xm = x + w / 2;
    var ym = y + h / 2;
    ctx.beginPath();
    ctx.moveTo(x, ym);
    ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
    ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
    ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
    ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
    ctx.stroke();
}

function main() {
    var ctx = getCtx("canvas")
    ctx.lineWidth = 2;
    drawEllipse(ctx, 10, 10, 200, 100);
}
main();